<template>
  <div>
    <el-form ref="formSearch" :model="formSearch" label-width="100px" size="small" :inline="true">
        <el-form-item>
            <el-button type="primary" size="small" @click.stop="handleAdd()">添加</el-button>
        </el-form-item>
        <el-form-item>
            <el-input v-model="formSearch.name" placeholder="请输入设备名称"></el-input>
        </el-form-item>
        <el-form-item>
            <el-button type="primary" @click="searchFormSubmit()">搜索</el-button>
        </el-form-item>
    </el-form>
    <!-- 表格 -->
    <avue-crud :option="tableOption" :data="tableData" :table-loading="tableLoading" :page="page" ref="crud" @current-change='currentChange' @size-change="sizeChange">
        <template slot-scope="scope" slot="coded">
            {{scope.row.equipment.coded}}
        </template>
        <template slot-scope="scope" slot="name">
            {{scope.row.equipment.name}}
        </template>
        <template slot-scope="scope" slot="marking">
            {{scope.row.equipment.marking}}
        </template>
        <template slot-scope="scope" slot="brand">
            {{scope.row.equipment.brand}}
        </template>
        <template slot-scope="scope" slot="menu">
            <el-button type="primary" size="small"  plain @click.stop="handleDelete(scope.row,scope.index)">删除</el-button>
        </template>
    </avue-crud>
    <!-- 选择设备 -->
    <el-dialog title="设备选择" :visible.sync="dialogFormVisible" width="50%" class="chioceMember">
        <div>
            <el-form ref="formSearch" :model="equipmentSearch"  size="small" :inline="true">
                <el-form-item label="设备类别:">
                    <el-cascader v-model="equipmentSearch.equipmentTypeId"
                                 :options="equipmentType"
                                 :props="{ expandTrigger: 'hover' }"></el-cascader>
                </el-form-item>
                <el-form-item label="存放位置:"  prop='type' >
                    <el-select v-model="equipmentSearch.location" placeholder="请选择" style="width:180px" >
                        <el-option label="全部" value="-1"></el-option>
                        <el-option label="仓库" value="0"></el-option>
                        <el-option label="实验室" value="1"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="设备编码:">
                    <el-input v-model="equipmentSearch.equipmentCoding" placeholder="请输入设备编码"></el-input>
                </el-form-item>
                <el-form-item label="设备名称:">
                    <el-input v-model="equipmentSearch.equipmentName" placeholder="请输入设备名称"></el-input>
                </el-form-item>
                <!--<el-form-item label="设备型号:">
                    <el-input v-model="equipmentSearch.equipmentTypeId" placeholder="请输入设备型号"></el-input>
                </el-form-item>-->
                <el-form-item>
                    <el-button type="primary" @click="searchEquipmentSubmit()">搜索</el-button>
                </el-form-item>
            </el-form>
            <!--<el-row :gutter="23">
                <el-col :span='5' >
                    <ul>
                        <el-tree :data="treeData" highlight-current  @node-click="handleNodeClick"></el-tree>
                    </ul>
                </el-col>
                <el-col :span='18' style="border-left:1px dotted #DCDFE6" >-->
                    <avue-crud :option="equipmentOption" :data="equipmentTableData" :table-loading="tableEquipmentLoading" :page="pageEquipment" ref="crudEquipment" @current-change='changePageEquipment' @selection-change='selectionChange' @size-change="sizeChangeEquipment">
                        <!-- <template slot-scope="scope" slot="menu">
                            <el-button type="primary" size="small"  plain @click.stop="handleDelete(scope.row,scope.index)">删除</el-button>
                            <el-button type="primary" size="small"  plain @click.stop="handleTimeManage(scope.row,scope.index)">工时管理</el-button>
                        </template> -->
                        <template slot-scope="scope" slot="status">
                            {{equipmentTableDataStatus[scope.row.status]}}
                        </template>
                        <template slot-scope="scope" slot="location">
                            {{equipmentTableDataAddress[scope.row.location]}}
                        </template>
                    </avue-crud>
              <!--  </el-col>
            </el-row>-->
         </div>  
         <div slot="footer" class="dialog-footer" style="text-align:center">
            <el-button size="small" @click="dialogFormVisible = false">关 闭</el-button>
            <el-button type="primary" size="small" @click="handleAddLine()">确 认</el-button>
        </div>
    </el-dialog>
  </div>
</template>

<script>
import { eqTableOption,eqChangeOption } from "@/const-personal/ledger/projectLedger.js"
import { addProjectEquipmentList, getProjectEquipment, addProjectEquipment ,updProjectEquipment ,delProjectEquipment } from "@/api/ledger/progect"
import { getEquipmentList } from "@/api/equipment/device/management"
import { validateAcquaintance } from "@/util/validate.js"
import { equipmentTypeList } from "@/api/equipment/device/managementType"
import { DepartmentTree } from "@/util/util.js"
import { getStore } from '@/util/store'
import { getEquipmentType } from '@/api/equipment/device/management.js'
import { DepartmentTreeVChildrenNull } from "@/util/util.js"

export default {
    name: "项目设备",
    data() {
        return {
            projectId: getStore({ name: 'projectId'}),
            equipmentTableDataStatus:['已启用','已停用','保养中','校准中','故障中','已报废'],
            equipmentTableDataAddress:['仓库','实验室'],
            formSearch:{
                name:''
            },
            tableOption:eqTableOption,
            page: {
                total: 10, //总页数
                currentPage: 1, //当前页数
                pageSize: 10, //每页显示多少条
                pageSizes: [5,10,20]
            },
            tableLoading: false,
            tableData:[],//数据
            // 选择设备
            dialogFormVisible:false,
            activeEquipment:-1,//当前成员type
            equipmentOption:eqChangeOption,
            equipmentTableData:[],//数据
            pageEquipment:{
                total: 10, //总页数
                currentPage: 1, //当前页数
                pageSize: 10, //每页显示多少条
                pageSizes: [5,10,20]
            },
            treeData:[],
            tableEquipmentLoading:false,
            tableSelectedIds:[],//选择成员
            equipmentSearch:{
                name:'',
                location:'-1',
                equipmentTypeId:['-1']
            }
        }
    },
    mounted(){
        this.searchFormSubmit();
        this.getComEqType()
    },
    methods: {
        //树状图事件
        handleNodeClick(data){
            console.log(data)
            this.equipmentSearch.deviceClass = data.id
            this.searchEquipmentSubmit()
        },
        //查询
        searchFormSubmit(){
            let data = {
                name: this.formSearch.name,
                projectListId:this.projectId
            }
            data.page = this.page.currentPage;
            data.size = this.page.pageSize;
            getProjectEquipment(data).then(res => {
                if(res.data.code==200){
                    this.tableData = res.data.data.list;
                    this.page.total = res.data.data.total;
                    this.page.currentPage = res.data.data.pageNum;
                    this.page.pageSize = res.data.data.pageSize;
                } else {
                    this.$notify.error({ title: '查询失败', message: '获取列表失败！', type: 'danger', });
                }
            })
        },
        //添加
        handleAdd(){
            this.equipmentSearch={
                name:'',
                location:'-1',
                equipmentTypeId:['-1']
            };
            equipmentTypeList().then(res => {
                if(res.data.code==200){
                    this.treeData = DepartmentTree(res.data.data,[{label:'全部',id:-1}])
                } else {
                    this.$notify.error({ title: '查询失败', message: '获取设备类型失败！', type: 'danger', });
                }
            })
            this.searchEquipmentSubmit();
            this.dialogFormVisible=true;
        },
        // 项目物品分页
        currentChange(page){
            this.page.currentPage = page;
            this.searchFormSubmit();
        },
        //分页大小
        sizeChange(val){
            this.page.pageSize = val;
            this.searchFormSubmit();
        },
        // 删除
        handleDelete(row,index){
            this.$confirm('删除后，将无法找回, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                //请求-删除
                delProjectEquipment(row.id).then(res => {
                    if(res.data.code==200){
                        this.searchFormSubmit()
                        this.$notify({ title: '操作成功', type: 'success', message: '已成功删除!'});
                        this.dialogFormVisible = false;
                    } else {
                        this.$notify.error({ title: '操作失败', message: res.data.message, type: 'danger', });
                    }
                })
            }).catch(() => {
                this.$notify({ title: '已取消删除', type: 'info', });
            });
        },
        // 确认选择设备
        handleAddLine(){
            let data = {
                data : this.tableSelectedIds,
                query: '?projectId='+this.projectId
            }
            addProjectEquipmentList(data).then(res => {
                if(res.data.code==200){
                    this.$notify({ title: '操作成功', type: 'success', message: '已成功添加设备!'});
                    this.dialogFormVisible = false;
                    this.searchFormSubmit();
                } else {
                    this.$notify.error({ title: '查询失败', message: res.data.message, type: 'danger', });
                }
            })
        },
         // 选择设备---分页
        changePageEquipment(page){
            this.pageEquipment.currentPage = page;
            this.searchEquipmentSubmit();
        },
        sizeChangeEquipment(val){
            this.pageEquipment.pageSize = val;
            this.searchEquipmentSubmit();
        },
        //  选择设备---多选
        selectionChange(selection){
            this.tableSelectedIds = []
            selection.forEach(item => {
                this.tableSelectedIds.push(item.id)
            });
        },
        getComEqType () { // 设备类别
            getEquipmentType().then(res => {
                if (res.data.code === 200) {
                    this.equipmentType = DepartmentTreeVChildrenNull(res.data.data,[{label:'全部',value:'-1'}])
                } else {
                    this.$notify.error({ title: '查询失败', message: res.data.message, type: 'danger', });
                }
            })
        },
        // 选择设备--搜索
        searchEquipmentSubmit(){
            let data = {
                equipmentCoding: this.equipmentSearch.equipmentCoding,
                equipmentName: this.equipmentSearch.equipmentName,
                deviceClass: this.equipmentSearch.deviceClass == -1 ? null : this.equipmentSearch.deviceClass,
                location: this.equipmentSearch.location == -1 ? null : this.equipmentSearch.location,
                equipmentTypeId: this.equipmentSearch.equipmentTypeId[length] == '-1' ? null : this.equipmentSearch.equipmentTypeId[length],
            }
            data.page = this.pageEquipment.currentPage;
            data.size = this.pageEquipment.pageSize;
            getEquipmentList(data).then(res => {
                if(res.data.code==200){
                    this.equipmentTableData = res.data.data.list;
                    this.pageEquipment.total = res.data.data.total;
                    this.pageEquipment.currentPage = res.data.data.pageNum;
                    this.pageEquipment.pageSize = res.data.data.pageSize;
                } else {
                    this.$notify.error({ title: '查询失败', message: '获取设备列表失败！', type: 'danger', });
                }
            })
        },
        // 选择设备--切换部门
        changeEquipment(i){
            this.activeDepartment=i;
            this.searchFormSubmit();
        }
    }
};
</script>

<style scoped>
.table_page_number {
    margin-top: 35px;
    font-weight: normal;
    text-align: center;
  }
    .chioceMember ul{
        max-height: 582px;
        overflow-y: auto;
    }
  .chioceMember li{
      padding: 10px 0;
      cursor: pointer;
  }
  .chioceMember li.active{
      font-weight: bold
  }
</style>